<template>
  <div class="detail-tab3 content">
    <div class="content">
      <div style="text-align: right">
        <el-form
          ref="headerSearchForm"
          :model="headerSearchForm"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="时间" prop="year">
            <el-date-picker
              v-model="headerSearchForm.year"
              type="year"
              placeholder="选择年"
            >
            </el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="季度" prop="quarter">
            <el-select
              v-model="headerSearchForm.quarter"
              placeholder="请选择"
              size="mini"
              clearable
            >
              <el-option
                v-for="(item, index) in quarterData"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
      </div>
      <div class="charts">
        <!-- 图表 -->
        <Pie :id="'pie'" :chartData="chartData" v-if="chartData.length > 0" />
      </div>
    </div>
    <div>
      <div class="title-small">十大股东</div>
      <el-table :data="tableData" class="tableBoxChild">
        <el-table-column label="序号" align="center" type="index">
        </el-table-column>
        <el-table-column
          prop="stockholderCustId"
          label="十大股东名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shareholdingAmount"
          label="持股金额"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shareholdingRatio"
          label="持股比例（%）"
          align="center"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Pie from "./charts/Pie.vue";
import { ShareholderInformation } from "@/api/customerManagement/issuerManagement/issuer.js";

export default {
  name: "DetailTab6",
  components: {
    Pie,
  },
  props: {
    rowData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      headerSearchForm: {
        year: "2023",
      },
      quarterData: [
        {
          label: "第一季度",
          value: "1",
        },
        {
          label: "第二季度",
          value: "2",
        },
        {
          label: "第三季度",
          value: "3",
        },
        {
          label: "第四季度",
          value: "4",
        },
      ],
      tableData: [],
      chartData: [],
    };
  },

  mounted() {},
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const params = {
        customerId: this.rowData.customerId,
        year: this.headerSearchForm.year,
      };
      const { data } = await ShareholderInformation(params);

      let cData = [];
      data.forEach((element, index) => {
        element.index = index + 1;
        let value;
        if (element.shareholdingRatio.includes("%")) {
          value = Number(element.shareholdingRatio.replace("%", ""));
        } else {
          value = element.shareholdingRatio;
        }
        cData.push({
          // value: element.shareholdingAmount,
          value: value,
          name: element.stockholderCustId,
        });
      });
      this.tableData = data;

      // 图表数据
      this.chartData = cData;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 200px;
}
.content {
  width: 100%;
  height: 100%;
}
.detail-tab3 {
  color: #ffffff;
  .title {
    font-size: 16px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .title-small {
    font-size: 14px;
    padding-bottom: 20px;
  }
  .charts {
    width: 100%;
    height: 300px;
  }
}
</style>
